<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>教师成绩分析-云校通</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<script src="<%=basePath %>/js/echarts-3.8.4.js"></script>
<script src="<%=basePath %>/js/picker.js"></script>
<script src="<%=basePath %>/js/select.js"></script>
<body ontouchstart>
	<div class="weui_tab tab-bottom">
		<div class="weui-header bg-blue"> 
	  		<div class="weui-header-left"> <a onclick="back()" href="javascript:" class="icon icon-109 f-white">返回</a> </div>
	    	<h1 class="weui-header-title" ><span class="schoolYear"></span>成绩分析</h1>
	    	<div class="weui-header-right">
	    		<i class="icon icon-74"></i>
	    		<input type="text" id="schoolYear" readonly style="position: absolute;top: 0;opacity: 0;">
	    	</div>
	    </div>
		<div class="weui_tab_bd">
			<div class="weui_cells afterNone afterNoneBefore mt0">
				<div class="weui_cell bd-t0">
					<div class="weui_cell_hd weui_center_25">
						${teacher.gradeText }
					</div>
					<div class="weui_cell_hd weui_center_25">
						${teacher.subjectText }
					</div>
					<div class="weui_cell_hd weui_center_50">
						${teacher.name }
					</div>
				</div>
			</div>
			<div class="weui_cells afterNone afterNoneBefore mt0">
				<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class=""><span class="schoolYear"></span> 综合成绩分析</p>
		            </div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div id="currTermExam" style="width: 100%;height:320px;"></div>
	          	</div>
				
				<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class=""><span class="newestExam"></span> 考试成绩分析</p>
		            </div>
	          	</div>
				<div class="weui_cell bd-t0" id="newestExamList">
	          		<div class="weui_cell_hd weui_center_25">班级</div>
	          		<div class="weui_cell_hd weui_center_25">人平均分</div>
	          		<div class="weui_cell_hd weui_center_25">实力</div>
					<div class="weui_cell_hd weui_center_25">排名</div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div id="currExam" style="width: 100%;height:320px;"></div>
	          	</div>
      		</div>
      		
      		<div class="weui_cells bd-t0 mt0">
      			<div class="weui_cell bd-t0" id="prizeList">
	          		<div class="weui_cell_hd">
						<img src="<%=basePath %>/images/huojiangdengji@3x.png" style="width:18px;margin-right:5px;display:block">
					</div>
					<div class="weui_cell_hd">
						<p class="pr15"><span class="schoolYear"></span> 获奖荣誉</p>
					</div>
	          	</div>
      		</div>
      		
      		<div class="weui_cells bd-t0 mt0 mb40">
      			<div class="weui_cell lblue bd-t0"> 
		            <div class="weui_cell_bd weui_cell_primary">
		                <p class="">教师任教班级的所教学科的实力排名</p>
		            </div>
	          	</div>
	          	<div class="weui_cell bd-t0">
	          		<div id="totalTermExam" style="width: 100%;height:450px;"></div>
	          	</div>
      		</div>
		</div>
	</div>
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script type="text/javascript">
	$(function() {
		termList();
		setTimeout(function(){termExam(null)}, 1000);
	})
	function termExam(schoolYear) {
		$.ajax({
    		url: basePath + "/ls/teaching/fruit/report/scoreSummary/list",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			teacherName: "${teacher.name}",
    			termYear: schoolYear != null ? schoolYear.substr(0,schoolYear.indexOf("-")) : schoolYear
    		},
    		success: function(rspData) {
    			if(rspData.length == 0){
    				$.alert("没有考试数据!", "");
    				return;
    			}
    			var categoryList = [];
    			var emptyCategory = [];
    			var classData = [];
    			for(var i in rspData) {
    				if(!classData[rspData[i].classGrade]) {
    					classData[rspData[i].classGrade] = [];
    					classData[rspData[i].classGrade].clazz = rspData[i].classGrade;
    				}
    				if(!categoryList[rspData[i].examId]) {
    					categoryList[rspData[i].examId] = [];
    					var examFullName = schoolYear != null ? rspData[i].examName+"("+
						rspData[i].termName.substring(rspData[i].termName.lastIndexOf("学年")+2,
								rspData[i].termName.lastIndexOf("学年")+3)+")" : rspData[i].termName+rspData[i].examName;
    					categoryList[rspData[i].examId] = examFullName;
    					emptyCategory[rspData[i].examId] = [];
    					emptyCategory[rspData[i].examId] = null;
    				}
    			}
    			for(var i in rspData) {
    				var cd = classData[rspData[i].classGrade];
    				if(cd) {
    					if(cd.data == null) {
    						cd.data = cloneArray(emptyCategory);
    					}
    					cd.data[rspData[i].examId] = rspData[i].strengthRanking;
					}
    				
    			}
    			if(schoolYear != null) {
    				var list = [], examId = null;
       				for(var i = rspData.length -1; i >= 0; i--) {
           				if(examId == null) examId = rspData[i].examId;
           				if(examId == rspData[i].examId) {
           					list.push(rspData[i]);
           				}
           			}
        			currExam(list);
    				$(".schoolYear").html(schoolYear);
        			termExamReport(categoryList, classData);
    			}else {
    				totalTermExamReport(categoryList, classData);
    			}
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function termList() {
		$.ajax({
    		url: basePath + "/termListForPhone",
    		type: 'POST',
    		dataType : "json",
    		success: function(data) {
    			var list = [];
    			var map = new Map();
    			for(var i in data) {
    				var termYear = data[i].termName.substr(0,data[i].termName.lastIndexOf("学期")-1)
    				var year = data[i].termName.substr(0,data[i].termName.indexOf("-"));
    				if(i == 0) {
    					termExam(termYear);
    					prizeList(termYear);
    					$(".schoolYear").html(termYear);
    				}
    				if(map.get(year) == null) {
    					map.set(year, termYear);
    					list.push(termYear);
    				}
    			}
    			$("#schoolYear").picker({
    			     title: "请选择学年",
    			     toolbarCloseText:'确定',
    			     onClose:function(){
    			     	termExam(this.cols[0].displayValue);
    			     	prizeList(this.cols[0].displayValue);
						 $(".schoolYear").html(this.cols[0].displayValue);
    			     },
    			     cols: [
    			       {
    			         textAlign: 'center',
    			         values: list
    			       }
    			     ]
    			   });
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function prizeList(schoolYear) {
		$.ajax({
    		url: basePath + "/ls/teaching/fruit/report/prizeList",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			teacherId: "${teacher.id}",
    			termYear: schoolYear.substr(0,schoolYear.indexOf("-"))
    		},
    		success: function(rspData) {
    			if(rspData.length == 0) return;
    			var html = '<div class="weui_cell bd-t0 prizeList" style="-webkit-align-items: none;align-items: left;padding-top: 0px;">\
	          		<div class="weui_cell_hd f15 f-gray4e weui_50"><b>项目名称</b></div>\
	          		<div class="weui_cell_hd f15 f-gray4e weui_center_25"><b>获奖级别</b></div>\
	          		<div class="weui_cell_hd f15 f-gray4e weui_center_25"><b>获奖等第</b></div>\
	          	</div>';
    			for(var i in rspData) {
    				html += '<div class="weui_cell bd-t0 prizeList" style="-webkit-align-items: none;align-items: left;padding-top: 0px;">\
    	          		<div class="weui_cell_hd f15 f-gray4e weui_50">'+rspData[i].projectName+'</div>\
    	          		<div class="weui_cell_hd f15 f-gray4e weui_center_25">'+rspData[i].awardLevel+'</div>\
    	          		<div class="weui_cell_hd f15 f-gray4e weui_center_25">'+rspData[i].awardGrade+'</div>\
    	          	</div>';
    			}
    			$(".prizeList").remove();
    			$("#prizeList").after(html);
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function currExamData(examId) {
		$.ajax({
    		url: basePath + "/ls/teaching/fruit/report/scoreSummary/list",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			teacherName: "${teacher.name}",
    			examId: examId
    		},
    		success: function(rspData) {
    			currExam(rspData);
    		},
    		error: function(data) {
    			$.alert("系统异常,请联系管理员", "");
    		}
    	});
	}
	function currExam(data) {
		$(".newestExam").html(data[0].termName + data[0].examName);
		var html = '';
		for(var i in data) {
			html += '<div class="weui_cell bd-t0 score_item">\
          		<div class="weui_cell_hd weui_center_25 f15 f-gray9e">'+getGradeClazz(data[i].classGrade.toString())+'</div>\
          		<div class="weui_cell_hd weui_center_25 f15 f-gray9e">'+data[i].avgScore+'</div>\
          		<div class="weui_cell_hd weui_center_25 f15 f-gray9e">'+data[i].strength+'</div>\
				<div class="weui_cell_hd weui_center_25 f15 f-gray9e">'+data[i].strengthRanking+'</div>\
          	</div>';
		}
		$(".score_item").remove();
		$("#newestExamList").after(html);
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('currExam'));

		option = {
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    legend: {
		        data:['特优率','优秀率','合格率','不合格率']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis : [
		        {
		            type : 'category',
		            name : "班级",
		            data : (function () {
				    	var list = [];
				    	for(var i in data) {
				    		list.push(getGradeClazz(data[i].classGrade.toString()))
				    	}
				    	return list;
				    })()
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            name : "百分比%",
		            max : 100
		        }
		    ],
		    series : [
		        {
		            name:'特优率',
		            type:'bar',
		            data:(function () {
				    	var list = [];
				    	for(var i in data) {
				    		list.push(toDecimal(data[i].bestRate*100));
				    	}
				    	return list;
				    })(),
		            itemStyle:{
		                normal:{
		                    color:"#2fdb96"
		                }
		            },
		            label: {
		                normal: {
		                    show: true,
		                    position: 'top'
		                }
		            }
		        },
		        {
		            name:'优秀率',
		            type:'bar',
		            data:(function () {
				    	var list = [];
				    	for(var i in data) {
				    		list.push(toDecimal(data[i].goodRate*100));
				    	}
				    	return list;
				    })(),
		            itemStyle:{
		                normal:{
		                    color:"#fea61c"
		                }
		            },
		            label: {
		                normal: {
		                    show: true,
		                    position: 'top'
		                }
		            }
		        },
		        {
		            name:'合格率',
		            type:'bar',
		            data:(function () {
				    	var list = [];
				    	for(var i in data) {
				    		list.push(toDecimal(data[i].qualifiedRate*100));
				    	}
				    	return list;
				    })(),
		            itemStyle:{
		                normal:{
		                    color:"#3bbb23"
		                }
		            },
		            label: {
		                normal: {
		                    show: true,
		                    position: 'top'
		                }
		            }
		        },
		        {
		            name:'不合格率',
		            type:'bar',
		            data:(function () {
				    	var list = [];
				    	for(var i in data) {
				    		list.push(toDecimal(data[i].lowRate*100));
				    	}
				    	return list;
				    })(),
		            itemStyle:{
		                normal:{
		                    color:"#ece137"
		                }
		            },
		            label: {
		                normal: {
		                    show: true,
		                    position: 'top'
		                }
		            }
		        }
		    ]
		};
		// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	}
	var examTemp = [];
	function termExamReport(categoryList, classData) {
		examTemp = categoryList;
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('currTermExam'));
		option = {
		    tooltip: {
		        trigger: 'axis'
		    },
		    grid: {
		    	left: '12%',
		        bottom: '25%',
		    },
		    legend: {
		    	data: (function () {
			    	var list = [];
			    	for(var i in classData) {
			    		list.push(getGradeClazz(classData[i].clazz.toString()));
			    	}
			    	return list;
			    })()
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: getArray(categoryList),
		        name: "考试",
		        axisLabel: {interval: 0, rotate: 62}
		    },
		    yAxis: {
		        type: 'value',
		        name: "排名"
		    },
		    series: (function () {
		    	var list = [];
		    	for(var i in classData) {
		    		list.push({
		    			name: getGradeClazz(classData[i].clazz.toString()),
			            type:'line',
			            symbol: 'diamond',
			            symbolSize: 15,
			            data: getArray(classData[i].data)
		    		})
		    	}
		    	return list;
		    })()
		};
		// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	 	// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	    myChart.on('click', function (params) {
	    	for(var i in examTemp) {
	    		if(examTemp[i] == params.name) {
	    			currExamData(i);
	    			$.alert(params.name+", 考试数据加载成功", "");
	    		}
	    	}
	    });
	}
	
	function totalTermExamReport(categoryList, classData) {
		examTemp = categoryList;
		//基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('totalTermExam'));
		option = {
		    tooltip: {
		        trigger: 'axis'
		    },
		    grid: {
		    	hoverable:true,
		    	bottom: '45%'
		    },
		    legend: {
		    	data: (function () {
			    	var list = [];
			    	for(var i in classData) {
			    		list.push(classData[i].clazz+"班");
			    	}
			    	return list;
			    })()
		    },
		    dataZoom: [{
	            show: true,
	            realtime: true,
	            start: 0,
	            end: 100
	        }],
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: getArray(categoryList),
		        name: "考试",
		        axisLabel: {interval: 0, rotate: 82}
		    },
		    yAxis: {
		        type: 'value',
		        name: "排名"
		    },
		    series: (function () {
		    	var list = [];
		    	for(var i in classData) {
		    		list.push({
		    			name: classData[i].clazz+"班",
			            type:'line',
			            data: getArray(classData[i].data)
		    		})
		    	}
		    	return list;
		    })()
		};
		// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	}
	
	function getGradeClazz(gradeClazz) {
		return getGradeName1("${term.termKey}", gradeClazz.substr(0,4)) + 
		"(" + parseInt(gradeClazz.substr(4,gradeClazz.length)) + ")班";
	}
</script>
</html>